<template>
  <div class="container">
    <!-- 顶部区域 -->
    <div class="left">
      <a-row class="top-section" gutter="{16}">
        <a-col :span="4">
          <a-select v-model="selectedCompany" placeholder="选择公司" style="width: 100%">
            <a-select-option v-for="company in companies" :key="company" :value="company">
              {{ company }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
          <a-select v-model="selectedYear" placeholder="选择年度" style="width: 100%">
            <a-select-option v-for="year in years" :key="year" :value="year">
              {{ year }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
          <a-input v-model="keyword" placeholder="关键字查询" style="width: 100%" />
        </a-col>
        <a-col :span="2" class="search-button">
          <a-button type="primary" @click="searchReports" style="width: 100%"
            >查询</a-button
          >
        </a-col>
      </a-row>

      <!-- 中部报告列表 -->
      <a-table
        :data-source="reports"
        :row-key="(record) => record.id"
        :columns="columns"
        row-selection="checkbox"
        class="report-table"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'download'">
            <a @click="pf(record.link)"> 链接 </a>
            <a @click="down(record.link, record.name)">下载</a>
          </template>
        </template>
      </a-table>

      <!-- 底部按钮 -->
      <a-row class="bottom-section" justify="end">
        <a-col>
          <a-button type="primary" @click="approveAll" class="action-button"
            >全部通过</a-button
          >
          <a-button type="danger" @click="openRejectionDialog" class="action-button"
            >驳回</a-button
          >
        </a-col>
      </a-row>
    </div>

    <a-card class="pd">
      <!-- <div ref="pdfContainer"></div> -->
      <iframe :src="pdfUrl"></iframe>
    </a-card>

    <!-- 驳回对话框 -->
    <a-modal
      v-model:visible="isRejectionDialogVisible"
      title="驳回报告"
      ok-text="确认"
      cancel-text="取消"
      @ok="confirmRejection"
      @cancel="cancelRejection"
      class="rejection-dialog"
    >
      <a-form>
        <a-form-item label="选择公司">
          <a-select
            v-model="selectedRejectionCompany"
            placeholder="选择公司"
            style="width: 100%"
          >
            <a-select-option v-for="company in companies" :key="company" :value="company">
              {{ company }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="驳回原因">
          <a-textarea
            v-model="rejectionReason"
            rows="4"
            placeholder="请输入驳回原因"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const pdfUrl = ref("");

const pf = (lin) => {
  console.log(lin);
  pdfUrl.value = lin;
};

const companies = ["公司A", "公司B", "公司C"];
const years = ["2022", "2023", "2024"];

const selectedCompany = ref<string | null>(null);
const selectedYear = ref<string | null>(null);
const keyword = ref<string>("");
const reports = ref([
  {
    id: 1,
    company: "腾讯",
    year: "2023",
    name: "腾讯2023ESG报告",
    download: "下载",
    link:
      "https://static.www.tencent.com/uploads/2024/05/29/64c2c411b5694a79bbd8ef4db73d6e57.pdf",
  },
  {
    id: 2,
    company: "腾讯",
    year: "2022",
    name: "腾讯2022ESG报告",
    download: "下载",
    link:
      "https://static.www.tencent.com/uploads/2023/04/06/0ca1d679732b1d0a1ca971521da66311.pdf",
  },
  {
    id: 3,
    company: "腾讯",
    year: "2021",
    name: "腾讯2021ESG报告",
    download: "下载",
    link:
      "https://static.www.tencent.com/uploads/2022/04/16/56e61654efa69f7503f997520a8f2766.pdf",
  },
]);

const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    width: 70,
    align: "center",
  },
  {
    title: "公司名",
    dataIndex: "company",
    key: "company",
    align: "center",
  },
  {
    title: "年度",
    dataIndex: "year",
    key: "year",
    width: 80,
    align: "center",
  },
  {
    title: "报告名称",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "下载",
    dataIndex: "download",
    key: "download",
    width: 100,
    align: "center",
  },
];

const isRejectionDialogVisible = ref(false);
const selectedRejectionCompany = ref<string | null>(null);
const rejectionReason = ref<string>("");

const searchReports = () => {
  console.log(
    `查询: 公司=${selectedCompany.value}, 年度=${selectedYear.value}, 关键字=${keyword.value}`
  );
};

const approveAll = () => {
  console.log("全部通过");
};

const openRejectionDialog = () => {
  isRejectionDialogVisible.value = true;
};

const confirmRejection = () => {
  console.log(
    `驳回公司: ${selectedRejectionCompany.value}, 原因: ${rejectionReason.value}`
  );
  isRejectionDialogVisible.value = false;
};

const cancelRejection = () => {
  isRejectionDialogVisible.value = false;
};

const down = (url, name) => {
  const link = document.createElement("a");
  link.href = url;
  link.download = name;
  link.target = "_blank";
  link.click();
};
</script>

<style scoped>
.container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* padding: 20px; */
}

.left {
  width: 50%;
  height: 100%;
  padding: 0 10px;
}

.pd {
  width: 50%;
  height: 80vh;
  iframe {
    width: 100%;
    height: 75vh;
  }
}

.top-section {
  margin-bottom: 10px;
}

.top-section .a-col {
  display: flex;
  align-items: center;
}

.report-table {
  margin-bottom: 20px;
}

.bottom-section {
  margin-top: 20px;
  text-align: right;
}

.action-button {
  margin-left: 10px;
}

a-modal .ant-modal-body {
  padding: 16px;
}

a-form-item {
  margin-bottom: 16px;
}

a-select,
a-input,
a-textarea {
  width: 100%;
}
</style>
